<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>父子组件</title>
</head>

<body>
    <h1>父子组件</h1>
    <hr />
    <div id="app"></div>

    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
    <script type="text/babel">

        function MyComA() {
            return (
                <h1>我是第1个组建</h1>
            )
        }

        function MyComB() {
            return (
                <h1>我是第2个组建</h1>
            )
        }

        function MyComC() {
            return (
                <h1>我是第3个组建</h1>
            )
        }

        function MyComD() {
            return (
                <h1>我是第4个组建</h1>
            )
        }

        function ComParent() {
            return (
                <div>
                    <MyComA />
                    <MyComB />
                    <MyComC />
                    <MyComD />
                </div>
            )
        }

        const app = document.querySelector("#app");
        const root = ReactDOM.createRoot(app);

        root.render(<ComParent/>);
       

    </script>
</body>

</html>